<template>
     <li class="RecommendItem" @click="ToList(item.id)" ref="li">
         <!--  + `?imageView=1&type=webp&thumbnail=${picSize}x${picSize}` -->
        <img alt="" v-lazy="item.picUrl + `?imageView=1&type=webp&thumbnail=${picSize}x${picSize}`" ref="image">
        <p>{{item.name}}</p>
        <span>{{item.playCount | FormatPlayCount}}</span>
    </li>
</template>

<script>
export default {
    props:['item'],
    data(){
        return {
            picSize:null,
        }
    },
    filters:{
        FormatPlayCount(InitValue){
            if(InitValue < 10**5){
                return InitValue;
            }else if(InitValue < 10**8){
                return (InitValue / 10**4).toFixed(0) + '万'
            }else{
                return (InitValue / 10**8).toFixed(0) + '亿'
            }
        },
    },
    methods:{
        ToList(id){
            this.$store.state.currentPlayListInfo = ''
            this.$store.state.currentListSongInfo = ''
            this.$router.push({
                path:'/SongListList',
                query:{
                    id
                }
            })
        }
    },
    created(){
        this.picSize = (window.innerWidth - 40) / 3
    }
}   
</script>

<style lang="less">
.RecommendItem{
    margin-bottom: 20px;
    position: relative;
    &:nth-child(3n-1){
        margin-left:10px;
        margin-right:10px;
    }
    img{
        width: 100%;
        border-radius: 8px;
        vertical-align: middle;
    }
    p{
        width: 100%;
        font-size: 14px;
        margin-top: 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    span{
        color: white;
        position: absolute;
        top: 3px;
        right: 6px;
        font-size: 14px;
        padding-left: 13px;
        text-shadow: 1px 0 1px black;
        background-position: 0;
        background-repeat: no-repeat;
        background-size: 11px 10px;
        background-image: url();
    }
}
</style>